<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <link rel="stylesheet" type="text/css" href="__FRONT__/dist/lib/weui.min.css">
    <link rel="stylesheet" type="text/css" href="__FRONT__/dist/css/jquery-weui.min.css">
    <link rel="stylesheet" type="text/css" href="__FRONT__/dist/demos/css/demos.css">
    <script src="__FRONT__/js/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="__FRONT__/js/common.js"></script>
    <link rel="stylesheet" type="text/css" href="__FRONT__/css/index.css">
    <style type="text/css">
        a {
            color: white;
        }

        #head {

            width: 100%;
            height: 300px;
        }

        #head .coupon {
            color: white;
            font-size: 14px;
            text-align: right;
            padding-top: 10px;
            padding-right: 10px;
        }

        .today .count {
            text-align: center;
            color: white;
        }

        .myMoney {
            display: flex;
            justify-content: center;
            text-align: center;
            color: white;
        / / margin-top: 23 px;
        }

        .balance p:nth-of-type(2) {
            margin-left: 17px;
            margin-top: 2px;
        }

        .or {
            margin: 0 5px;
        }

        /*我的投资*/
        .investment p:nth-of-type(2) {
            margin-left: 5px;
            margin-top: 2px;
        }

        .reward {
        / / margin-top: 16 px;
            text-align: center;
            color: white;
            letter-spacing: 3px;
        }

        .rewardMoney {
        / / margin-top: 6 px;
            text-align: center;
            color: white;
        }

        .put {
            text-align: center;
            color: white;
            margin-top: 2px;
        }

        .total {
            margin-top: 23px;
            display: flex;
            justify-content: space-around;
            color: white;
        }

        .year {
            display: flex;
            justify-content: space-between;
            color: #00a0e9;
        }

        .week {
            margin-top: 10px;
            display: flex;
            justify-content: space-around;
            color: white;
        }

        .sunday, .saturday {
            background-color: #00a0e9;
            width: 50px;
            height: 20px;
            border-radius: 5px;
            text-align: center;
            line-height: 20px;
        }

        .monday, .tuesday, .wednesday, .thursday, .friday {
            background-color: #9fd9f6;
            width: 50px;
            height: 20px;
            border-radius: 5px;
            text-align: center;
            line-height: 20px;
            margin: 0 5px;
        }

        .myPhone p:nth-of-type(1) {
            /* background-color: lightgreen;
             width: 70px;
             height: 20px;
             line-height: 20px;
             text-align: center;
             border-radius: 6px;
             margin-top: 4px;*/
        }

        .myPhone p:nth-of-type(2) {
            margin-top: 3px;
        }

        .fade {
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            position: fixed;
            left: 0;
            top: 0;
            z-index: 99;
            display: none;
        }

        .succ-pop {
            width: 260px;
            height: 256px;
            background-color: #fff;
            position: fixed;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            z-index: 999;
            border-radius: 5px;
            display: none;
        }

        .succ-pop h3.title {
            text-align: center;
            font-size: 17px;
            color: #797979;
            border-bottom: 1px solid #cdcdcd;
            height: 42px;
            line-height: 42px;
            font-weight: normal;
        }

        .phone {
            width: 90%;
            margin: 0 5% 0 4.5%;
            border: none;
            font-size: 16px;
            border-bottom: 1px solid #cdcdcd;
            margin-top: 15px;
            padding: 6px 0;
        }

        .checkCode {
            display: flex;
        }

        .checkCode input {
            width: 162px;
            height: 48px;
            border-right: 1px solid #cdcdcd;
            margin: 0 0 0 4.5%;
            border: none;
            font-size: 16px;
            border-bottom: 1px solid #cdcdcd;
            border-right: 1px solid #cdcdcd;
        }

        .checkCode p {
            color: green;
            font-size: 12px;
            border-right: 1px solid #cdcdcd;
            height: 48px;
            line-height: 48px;
            text-align: center;
            width: 70px;
            border-bottom: 1px solid #cdcdcd;
        }

        .loginPassword input {
            width: 90%;
            margin: 0 5% 0 4.5%;
            height: 48px;
            border-right: 1px solid #cdcdcd;
            border: none;
            font-size: 16px;
            border-bottom: 1px solid #cdcdcd;
        }

        .btnGroup {
            margin-top: 20px;
        }

        .btnGroup span:nth-of-type(1) {
            color: #797979;
            border-right: 1px solid #cdcdcd;
            padding: 0 48px;
        }

        .btnGroup span:nth-of-type(2) {
            margin-left: 45px;
            color: #04be02;
        }
        input:focus {
            outline: none;
        }
        .reward-group{
            margin-top: 22px;
        }

    </style>
</head>
<body>
<div id="content">
    <div>
        <div id="head" class="change_bg">
            <div class="coupon">
                <a href="{:url('Index/coupon')}">
                    优惠券 >>
                </a>
            </div>

<!--            <div class="today">
                <div class="count">
                    &lt;!&ndash; <h2>今日统计</h2>&ndash;&gt;
                    <img src="{$uinfo['portrait']?$uinfo['portrait']:config('headsrc')}" alt="" style="width:20%;border-radius:50%;">
                </div>
            </div>
            <div class="put">
                {$uinfo['mobile']}
            </div>-->
            <div class="myMoney">
                <div class="balance">
                    <p>我的余额</p>
                    <p>{$uinfo['balance']}</p>
                </div>

                <div class="or">|</div>

                <div class="investment">
                    <p>我的投资</p>
                    <p>{$uinfo['expend']}</p>
                </div>


            </div>
            <div class="put">
                <a href="{:url('pay/order')}">
                    充值&nbsp&nbsp&nbsp
                </a>
                <a href="{:url('index/money')}">
                    提现
                </a>
            </div>
            <div class="reward-group">
                <div class="reward">
                    <h2>累计奖励(元)</h2>
                </div>
                <div class="rewardMoney">
                    <h2>{$uinfo['add_bonus']}</h2>
                </div>
            </div>
            <div class="total"  style="text-align: center;">
                <div class="card">
                    <p>打卡金额</p>
                    <p>{$sys['signed_money']}</p>
                </div>

                <div class="me">
                    <p>今日补贴</p>
                    <p>{$sys['today_benefit']}</p>
                </div>

                <div class="noCard">
                    <p>未打卡金额</p>
                    <p>{$sys['notsign_money']}</p>
                </div>
            </div>
        </div>
    </div>
</div>


<!-- 账户主要表格 -->
<div class="account-box">
    <div class="year change_color">
        <h1 class="f-btn-jian left change_color">&lt;</h1>
        <div>
            <p><span class="months">may</span><span style="font-size: 32px;" class="f-month">5</span>
            <p style="margin-top: -5px;" class="f-year">2018</p></p>
        </div>
        <h1 class="f-btn-jia left change_color">&gt;</h1>
    </div>
    <div class="f-rili-table">
        <div class="f-rili-head celarfix week">
            <div class="f-rili-th sunday change_bg ">周日</div>
            <div class="f-rili-th monday change_1_5_bg">周一</div>
            <div class="f-rili-th tuesday change_1_5_bg">周二</div>
            <div class="f-rili-th wednesday change_1_5_bg">周三</div>
            <div class="f-rili-th thursday change_1_5_bg">周四</div>
            <div class="f-rili-th friday change_1_5_bg">周五</div>
            <div class="f-rili-th saturday change_bg">周六</div>
            <div class="clear"></div>
        </div>
        <div class="f-tbody clearfix">
        </div>
    </div>
</div>

<div class="weui-tabbar">
    <a href="{:url('Index/index')}" class="weui-tabbar__item">
        <div class="weui-tabbar__icon">
            <img src="__FRONT__/img/home2.png" alt="">
        </div>
        <p class="weui-tabbar__label">参与挑战</p>
    </a>

    <a href="" class="weui-tabbar__item">
        <div class="weui-tabbar__icon">
            <img class="black_rili" src="__FRONT__/img/riliday.png" alt="">
        </div>
        <p class="weui-tabbar__label change_color">日历</p>
    </a>

    <a href="{:url('Index/center')}" class="weui-tabbar__item">
        <div class="weui-tabbar__icon">
            <img src="__FRONT__/img/ren.png" alt="">
        </div>
        <p class="weui-tabbar__label">个人中心</p>
    </a>
    <a href="{:url('Index/read')}" class="weui-tabbar__item">
        <div class="weui-tabbar__icon">
            <img src="__FRONT__/img/eye.png" alt="">
        </div>
        <p class="weui-tabbar__label">参与必读</p>
    </a>
</div>

<!-- 自定义弹出框 -->
<div class="fade"></div>
<div class="succ-pop">
    <h3 class="title">
        请绑定账号信息
    </h3>

    <div>
        <input class="phone" type="text" placeholder="请输入手机号" name="">
    </div>

    <div class="checkCode">
        <input type="text" placeholder="请输入验证码" name="">
        <p>获取验证码</p>
    </div>

    <div class="loginPassword">
        <input type="text" placeholder="请输入登录密码" name="">
    </div>

    <div class="btnGroup">
        <span class="cancel">取消</span>
        <span class="confirms">确认</span>
    </div>
</div>
</body>
<script>
    /*绑定手机号*/
    /*$("#bindPhone").click(function(){
     $(".fade").css('display','block');
     $(".succ-pop").css('display','block');
     })*/



    /*关闭弹出框*/
    $(".cancel").click(function () {
        $(".fade").css('display', 'none');
        $(".succ-pop").css('display', 'none');
    })

    /*弹出框提交元素*/
    $(".confirms").click(function () {
        console.log('提交事件');
    })

    /*加载日历*/
    $(function () {
        /*切换主题*/
        if(localStorage.getItem('status')){
            if(localStorage.getItem('status')==1){
                night();
            }else{
                day();
            }
        }else{
            localStorage.setItem('status',2);
            day();
        }
        $(".switchs").click(function () {
            if (localStorage.getItem('status') == 1){
                localStorage.setItem('status',2);
                day();
            } else {
                localStorage.setItem('status',1);
                night();
            }
        });
        function night(){
            $("#header").css("background-image", "url(__BLACK__/black_bg.png)");
            $(".rightIcon").css("background-color", "#697dff");
            $(".center h3").css("color", "#697DFF");
            $(".real").css("color", "#505fbe");
            $(".black_star").attr("src", "__BLACK__/black_star.jpg");
            $(".black_yl").attr("src", "__BLACK__/black_yl.png");
            $(".firstTime").css("background-color", "#697dff");
            $(".secondTime").css("background-color", "#91a0ff");
            $('.change_color').css('color','#697DFF');
            $('.black_rili').attr('src','__FRONT__/img/riliye.png');
            $('.change_bg').css('background-color','#697DFF');
            $('.change_1_5_bg').css('background-color','#91A0FF');


        }
        function day(){
            $("#header").css("background-image", "url(__FRONT__/img/bg.png)");
            $(".rightIcon").css("background-color", "#00beff");
            $(".center h3").css("color", "#4ad1ff");
            $(".real").css("color", "#0990be");
            $(".black_star").attr("src", "__FRONT__/img/star.png");
            $(".black_yl").attr("src", "__FRONT__/img/yl.png");
            $(".firstTime").css("background-color", "#00a3da");
            $(".secondTime").css("background-color", "#4ad1ff");
            $('.change_color').css('color','#4ad1ff');
            $('.black_rili').attr('src','__FRONT__/img/riliday.png');
            $('.change_bg').css('background-color','#4ad1ff');
            $('.change_1_5_bg').css('background-color','');
        }
        /*切换主题*/



        //页面加载初始化年月
        var mydate = new Date();
        $(".f-year").html(mydate.getFullYear());
        $(".f-month").html(mydate.getMonth() + 1);
        selectMonth(mydate.getMonth() + 1);
        showDate(mydate.getFullYear(), mydate.getMonth() + 1);
        //日历上一月
        $(".f-btn-jian ").click(function () {
            var mm = parseInt($(".f-month").html());
            var yy = parseInt($(".f-year").html());
            /*返回12月*/
            if (mm == 1) {
                $(".f-year").html(yy - 1);
                $(".f-month").html(12);
                showDate(yy - 1, 12);
                selectMonth(12);
            } else {
                $(".f-month").html(mm - 1);
                selectMonth(mm - 1);
                showDate(yy, mm - 1);
            }
        })
        /*日历下一月*/
        $(".f-btn-jia").click(function () {
            var mm = parseInt($(".f-month").html());
            var yy = parseInt($(".f-year").html());

            /*返回12月*/
            if (mm == 12) {
                $(".f-year").html(yy + 1);
                $(".f-month").html(1);
                showDate(yy + 1, 1);
                selectMonth(1);
            } else {
                /*上一月*/
                $(".f-month").html(mm + 1);
                selectMonth(mm + 1);
                showDate(yy, mm + 1);
            }

        });
        //返回本月
        $(".f-btn-fhby").click(function () {
            $(".f-year").html(mydate.getFullYear());
            $(".f-month").html(mydate.getMonth() + 1);
            showDate(mydate.getFullYear(), mydate.getMonth() + 1);
        })

        //读取年月写入日历  重点算法!!!!!!!!!!!
        function showDate(yyyy, mm) {
            //Wed Mar 31 00:00:00 UTC+0800 2010
            var dd = new Date(parseInt(yyyy), parseInt(mm), 0);
            //本月天数
            var daysCount = dd.getDate();
            //写入代码
            var mystr = "";
            //图标代码
            var icon = "";
            //获取当前数据
            var items = "";
            //今天几号  21
            var today = new Date().getDate();
            //本月1日周几
            var monthstart = new Date(parseInt(yyyy) + "/" + parseInt(mm) + "/1").getDay()
            //上一月天数
            var lastMonth;
            //下一月天数
            var nextMounth
            if (parseInt(mm) == 1) {
                lastMonth = new Date(parseInt(yyyy) - 1, parseInt(12), 0).getDate();
            } else {
                lastMonth = new Date(parseInt(yyyy), parseInt(mm) - 1, 0).getDate();
            }
            if (parseInt(mm) == 12) {
                nextMounth = new Date(parseInt(yyyy) + 1, parseInt(1), 0).getDate();
            } else {
                nextMounth = new Date(parseInt(yyyy), parseInt(mm) + 1, 0).getDate();
            }
            //计算上月空格数
            for (j = monthstart; j > 0; j--) {
                mystr += "<div class='f-td f-null f-lastMonth' style='color:#ccc;'>" + (lastMonth - j + 1) + "</div>";
            }

            // console.log(items);return false;
            //获取打卡记录金额
            $.ajax({
                type: "POST",
                url: "{:url('index/RefactorItem')}",
                data: {'year': yyyy, 'month': mm},
                async: false,
                success: function (res) {
                    items = res.data;
                }
            });
            console.log(items);
            //本月单元格
            for (i = 0; i < daysCount; i++) {
                var curr = (i + 1);
                if (items[curr] != undefined) {
                    if (items[curr].status == 0) {
                        mystr += "<div class='f-td f-number'><span class='f-day'>" + (i + 1) + "</span>"
                            + "<div class='f-table-msg' style='display:block;'>未打卡</div></div>";
                    } else {
                        mystr += "<div class='f-td f-number'><span class='f-day'>" + (i + 1) + "</span>"
                            + "<div class='f-table-msg' style='display:block;'>" + items[curr].money + "</div></div>";
                    }


                } else {
                    mystr += "<div class='f-td f-number'><span class='f-day'>" + (i + 1) + "</span>"
                        + "<div class='f-table-msg' style='display:block;'></div></div>";
                }

            }

            //计算下月空格数
            for (k = 0; k < 42 - (daysCount + monthstart); k++) {//表格保持等高6行42个单元格
                mystr += "<div class='f-td f-null f-nextMounth' style='color:#ccc;'>" + (k + 1) + "</div>";
            }
            //写入日历
            $(".f-rili-table .f-tbody").html(mystr);
            //给今日加class
            if (mydate.getFullYear() == yyyy) {
                if ((mydate.getMonth() + 1 ) == mm) {
                    var today = mydate.getDate();
                    var lastNum = $(".f-lastMonth").length;
                    $(".f-rili-table .f-td").eq(today + lastNum - 1).addClass("f-today");
                }
            }
            //绑定选择方法
            $(".f-rili-table .f-number").off("click");
            $(".f-rili-table .f-number").on("click", function () {
                $(".f-rili-table .f-number").removeClass("f-on");
                $(this).addClass("f-on");
            });

            //绑定查看方法
            $(".f-yuan").off("mouseover");
            $(".f-yuan").on("mouseover", function () {
                $(this).parent().find(".f-table-msg").show();
            });
            $(".f-table-msg").off("mouseover");
            $(".f-table-msg").on("mouseover", function () {
                $(this).show();
            });
            $(".f-yuan").off("mouseleave");
            $(".f-yuan").on("mouseleave", function () {
                //$(this).parent().find(".f-table-msg").hide();
            });
            $(".f-table-msg").off("mouseleave");
            $(".f-table-msg").on("mouseleave", function () {
                //$(this).hide();
            });
        }

        //选择月份
        function selectMonth(months) {
            switch (months) {
                case 1:
                    $(".months").html("Jan");
                    break;

                case 2:
                    $(".months").html("Feb");
                    break;

                case 3:
                    $(".months").html("Mar");
                    break;

                case 4:
                    $(".months").html("Apr");
                    break;

                case 5:
                    $(".months").html("May");
                    break;

                case 6:
                    $(".months").html("Jun");
                    break;

                case 7:
                    $(".months").html("Jul");
                    break;

                case 8:
                    $(".months").html("Aug");
                    break;

                case 9:
                    $(".months").html("Sep");
                    break;

                case 10:
                    $(".months").html("Oct");
                    break;

                case 11:
                    $(".months").html("Nov");
                    break;

                case 12:
                    $(".months").html("Dec");
                    break;

                default:
                    $(".months").html("Err");
                    break;
            }
        }


    })

    function getToMoneyitem() {
        var mm = parseInt($(".f-month").html());
        var yy = parseInt($(".f-year").html());
        $.post("{:url('index/RefactorItem')}", {'year': yy, 'month': mm}, function (res) {
            return res.data;
        });

    }
</script>
</html>